<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		.imga{
			 animation: dfc .8s linear infinite;
							 
	   }
	    @keyframes dfc{
		0%{
				 transform: rotate(180deg);
		}
		30%{
			 	 transform: rotate(360deg);
		}
		100%{
			 	 transform: rotate(720deg);
		}
}
	 .imgb{
	 			 animation: dfc1 .8s linear infinite;
	 							 
	 	   }
	@keyframes dfc1{
	 		0%{
	 				 transform: rotateY(180deg);
	 		}
	 		30%{
	 			 	 transform: rotateY(360deg);
	 		}
	 		100%{
	 			 	 transform: rotateY(720deg);
	 		}
	 }
			
			
		</style>
	</head>
	<body>
		<img src="../img/LOGO.png" alt="1" />
		<audio src="../img/dafengche.mp3" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">停止转</button>
		<button id="btn3">反转</button>
		<script>
			$("#btn1").click(function(){
				// 元素有属性  元素可以加类名
				$("img").attr("src","../img/dfc.jpg").addClass("imga");
			});
			$("#btn2").click(function(){
				$("img").removeClass("imga");
				$("audio").removeAttr("src");
			});
			$("#btn3").click(function(){
				$("img").addClass("imgb");
			});
		</script>
	</body>
</html>